<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style> 
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var latlng;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer()
    latlng = new google.maps.LatLng(37.4444, -4.20723);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    var marker = new google.maps.Marker({
      position: latlng,
      map:map,
      title:"Hello World!"
  });
  directionsDisplay.setMap(map);
  
   
  }

  function calcRoute() {
  var start = document.getElementById("start").value;
  var end = latlng ;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {      
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }else{
        alert("La direccion introducida no es correcta")
    }
  });
}


</script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body onload="initialize()">
        <?php include 'include/cabecera.php'; ?>
        <div id="contenido">
            <div id="map_canvas" style="width:60%; height:60%"></div>
                
                    <input type="text" size="43" id="start" name="from" value=""/>
                    <input type="button" value="Calcula la ruta" onclick="calcRoute()">
                
        </div>

        <?php include 'include/menu.php'; ?>
    </body>
</html>
